import { useRef, useState, useEffect } from "react";
import "./App.css";
import Split from "react-split";

//react-flow
import { ReactFlowProvider } from "reactflow";
import NodeEditor from "./components/NodeEditor";
import { NodeSider } from "./components/NodeEditorAddon";

//fabric canvas
import { useFabricCanvas, fcContext, QuickAccess } from "./components/FabricCanvas";
import { useNotify, NotifyApiContext } from "./components/Notify";


function App() {
  const fcHandler = useFabricCanvas("ZCanvas");
  const [contextHolder, notifyApi] = useNotify();

  function onSplitDragEnd(sizes) {
    const w_ratio = sizes[1] / 100;
    const w = document.documentElement.clientWidth * w_ratio - 5;
    fcHandler.setWidth(w);

    const h = document.documentElement.clientHeight - 26;
    fcHandler.setHeight(h);
  }

  return (
    <ReactFlowProvider>
    <fcContext.Provider value={fcHandler}>
    <NotifyApiContext.Provider value={notifyApi}>

      <div className="app">
        {contextHolder}
        <div id="header">
          <b>DIP-Kit</b>
        </div>

        <Split className="split" onDragEnd={onSplitDragEnd}>
          <div className="app_nodeEditor_container">
            <NodeEditor />
            <NodeSider />
          </div>

          <div className="app_fabricCanvas_container">
            <canvas
              ref={fcHandler.CanvasRef}
              id="ZCanvas"
              width={document.documentElement.clientWidth * 0.5 - 5}
              height={document.documentElement.clientHeight - 26}
            ></canvas>
            <QuickAccess/>
          </div>
        </Split>
      </div>

    </NotifyApiContext.Provider>
    </fcContext.Provider>
    </ReactFlowProvider>
  );
}

export default App;
